<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Upload Demo</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
        .layui-upload-list{
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
            border: 1px solid #999999;
        }
        .layui-upload-list>img{
            border: none;
        }

        .fl {
            float: left;
        }
    </style>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 可放在<body>标签内的任意位置-->
<!--[if lt IE 9]> -->
<script src="src/compatibility_file/html5.min.js"></script>
<script src="src/compatibility_file/respond.min.js"></script>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>常规使用：普通图片上传</legend>
            </fieldset>

            <div class="layui-upload fl" style="margin-bottom: 20px;">
                <div class="layui-upload-list" id="preview">
                </div>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <br>
                <button class="layui-btn" id='delfFile' style="display: none;margin-top: 10px">删除图片</button>
            </div>

            <div class="layui-upload fl">
                <div class="layui-upload-list">
                    <!--<img class="layui-upload-img" id="demo2">-->

                </div>
                <button type="button" class="layui-btn" id="test2">上传图片</button>
            </div>

            <div class="layui-upload fl">
                <div class="layui-upload-list">
                    <!--<img class="layui-upload-img" id="demo3">-->
                </div>
                <button type="button" class="layui-btn" id="test3">上传图片</button>
            </div>

            <div class="layui-upload fl">
                <div class="layui-upload-list">
                    <!--<img class="layui-upload-img" id="demo4">-->
                </div>
                <button type="button" class="layui-btn" id="test4">上传图片</button>
            </div>
            <hr class="layui-bg-green">
            <br><button id="submitInfo" class="layui-btn layui-btn-primary" style="clear: both;">提交图片</button>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use('upload', function () {
    var $ = layui.jquery
        , upload = layui.upload;
    upload.render({
      elem: '#test1'
      ,multiple: false
      , auto: false
      ,bindAction: '#submitInfo'
      , choose: function (obj) {
        //预读本地文件示例，不支持ie8
        console.log(obj,'obj is')
        obj.preview(function (index, file, result) {
          var files = obj.pushFile();
          console.log(files,'files is')
          $('#delfFile').show();
          $('#preview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">');
          $('#delfFile').on('click',function(){
            delete files[index];
            console.log(files,'files is')
            $(this).remove();
            return
          })
        });
      }
    })
  })
</script>
</body>
</html>